<template>
  <div class="systemaStatistics">
    <commonBox :tag-name="'项目总数'" :tag-value="total" :tag-unit="'个'">
      <template #title>系统统计</template>
      <template #content>
        <div class="inner_content">
          <div id="systemType" ref="systemTypeRef"></div>
          <div id="level" ref="levelRef"></div>
          <span
            v-show="state.showSystemType"
            style="
              position: absolute;
              top: 50%;
              left: 25%;
              transform: translate(-50%, -50%);
              color: #ccc;
            "
            >暂无数据</span
          >
          <span
            v-show="state.showLevel"
            style="
              position: absolute;
              top: 50%;
              right: 10%;
              transform: translate(-50%, -50%);
              color: #ccc;
            "
            >暂无数据</span
          >
        </div>
      </template>
    </commonBox>
  </div>
</template>

<script setup lang="ts">
  import commonBox from './commonBox.vue'
  import * as echarts from 'echarts'
  //   import projectDataOverviewApi from '@/api/billboard/projectDataOverview'
  //   import { getIntDictOptionsString, DICT_TYPE } from '@/utils/dict'
  import useEmitt from '@/hooks/useEmitt'

  const state = reactive({
    colorList: ['#70c6a9', '#c5747f', '#2953c7', '#c9d179'],
    systemTypeData: [] as any[],
    levelData: [] as any[],
    deptId: 0,
    showSystemType: false,
    showLevel: false
  })
  const systemTypeOption = reactive({
    systemTypeDom: null as any,
    options: {
      tooltip: {
        trigger: 'item',
        borderColor: '#549af0',
        backgroundColor: 'rgba(0,0,0,.6)',
        borderWidth: 1,
        padding: 5,
        textStyle: {
          color: '#fff', //设置文字颜色
          fontSize: 12
        },
        formatter: function (parms) {
          return `
          ${parms.marker}${parms.data.name}</br>
          数量：${parms.data.value}个</br>
          占比：${parms.percent}%
          `
        }
      },
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        width: '100%',
        icon: 'circle', // 修改形状
        itemHeight: 8, // 修改icon图形大小
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#A2C3E0',
          fontSize: 11,
          padding: [0, 0, 0, -10],
          align: 'left',
          backgroundColor: 'transparent'
        },
        data: [] as any
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '38%'],
          radius: ['30%', '45%'],
          itemStyle: {
            normal: {
              color: function (params) {
                return state.colorList[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              show: true,
              overflow: 'none',
              formatter: '{b}',
              textStyle: {
                fontSize: 12,
                color: 'inherit'
              }
            }
          },
          labelLine: {
            normal: {
              length: 5,
              length2: 5,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [] as any
        }
      ]
    }
  })
  const levelData = reactive({
    levelDom: null as any,
    options: {
      tooltip: {
        trigger: 'item',
        borderColor: '#549af0',
        backgroundColor: 'rgba(0,0,0,.6)',
        borderWidth: 1,
        padding: 5,
        textStyle: {
          color: '#fff', //设置文字颜色
          fontSize: 12
        },
        formatter: function (parms) {
          return `
          ${parms.marker}${parms.data.name}</br>
          数量：${parms.data.value}个</br>
          占比：${parms.percent}%
          `
        }
      },
      legend: {
        orient: 'vertical',
        x: 'center',
        y: 'bottom',
        icon: 'circle', // 修改形状
        itemHeight: 8, // 修改icon图形大小
        itemGap: 12, // 修改间距
        textStyle: {
          color: '#A2C3E0',
          fontSize: 12,
          padding: [0, 0, 0, -4]
        },
        data: [] as any[]
        // formatter: function (name) {
        //   //通过name获取到数组对象中的单个对象
        //   let singleData = state.levelData.filter(function (item) {
        //     return item.name == name;
        //   });
        //   return `${name}        ${singleData[0].value}个`;
        // }
      },
      series: [
        {
          type: 'pie',
          center: ['50%', '38%'],
          radius: ['30%', '45%'],
          itemStyle: {
            normal: {
              color: function (params) {
                return state.colorList[params.dataIndex]
              }
            }
          },
          label: {
            normal: {
              show: true,
              overflow: 'none',
              formatter: '{b}',
              textStyle: {
                fontSize: 12,
                color: 'inherit'
              }
            }
          },
          labelLine: {
            normal: {
              length: 5,
              length2: 5,
              lineStyle: {
                width: 1
              }
            }
          },
          data: [] as any
        }
      ]
    }
  })
  const total = ref(0)
  const systemTypeRef = ref()
  const levelRef = ref()
  const emitter = useEmitt().emitter

  onMounted(() => {
    emitter.on('projectDataOverviewMapClick', projectDataOverviewMapClick)
    window.addEventListener('resize', resize)
  })
  const projectDataOverviewMapClick = (e: number) => {
    state.deptId = e
    getProjectType()
    getProjectLevel()
  }
  const resize = () => {
    systemTypeOption.systemTypeDom.resize()
    levelData.levelDom.resize()
  }
  const getProjectLevel = async () => {
    try {
      levelData.levelDom?.clear()

      let params = {
        deptId: state.deptId
      }
      total.value = 0
      state.levelData = []
      state.showLevel = false
      //   let dict = getIntDictOptionsString(DICT_TYPE.PROJECT_LEVEL)
      //   let res = await projectDataOverviewApi.getProjectLevel(params)
      //   if (res.length == 0) {
      //     state.showLevel = true
      //     return
      //   }

      //   for (let di of dict) {
      //     let value = 0
      //     res.find((item) => {
      //       if (item.name == di.value) {
      //         value = item.count
      //       }
      //     })
      //     let lable = Number(di.value) <= 2 ? `${di.label}系统` : `市县自建`
      //     state.levelData.push({ name: lable, value: value })
      //   }
      state.levelData.sort((a, b) => Number(b.value) - Number(a.value))

      initLevelDom()
    } catch (error) {
      console.log(error)
      state.showLevel = true
      levelData.levelDom?.dispose()
    }
  }
  const getProjectType = async () => {
    try {
      systemTypeOption.systemTypeDom?.clear()

      let params = {
        deptId: state.deptId
      }
      total.value = 0
      state.systemTypeData = []
      state.showSystemType = false
      //   let dict = getIntDictOptionsString(DICT_TYPE.PROJECT_TYPE)
      //   let res = await projectDataOverviewApi.getProjectType(params)
      //   if (res.length == 0) {
      //     state.showSystemType = true
      //     return
      //   }
      //   for (let di of dict) {
      //     let value = 0
      //     res.find((item) => {
      //       if (item.name == di.value) {
      //         value = item.count
      //       }
      //     })
      //     state.systemTypeData.push({ name: di.label, value: value })
      //   }
      state.systemTypeData.sort((a, b) => Number(b.value) - Number(a.value))
      // console.log(res,dict);
      // for (let item of res) {
      //   dict.find((it) => {
      //     if (it.value == item.name) {
      //       item.cname = it.label;
      //     }
      //   });
      //   state.systemTypeData.push({ name: item.cname, value: item.count });
      // }
      initSystemTypeDom()
      nextTick(() => {
        for (let item of state.systemTypeData) {
          total.value += Number(item.value)
        }
      })
    } catch (error) {
      console.log(error)
      state.showSystemType = true
      systemTypeOption.systemTypeDom?.dispose()
    }
  }
  const initSystemTypeDom = () => {
    let lengedData = state.systemTypeData.map((item) => item.name)
    let options = {
      ...systemTypeOption.options
    }
    // options.legend.data = lengedData;
    // options.legend.formatter = function (name) {
    //   //通过name获取到数组对象中的单个对象
    //   let singleData = state.systemTypeData.filter(function (item) {
    //     return item.name == name;
    //   });
    //   return `${name} ${singleData[0].value}个`;
    // };
    options.legend = [
      {
        orient: 'vertical',
        icon: 'circle',
        x: 'center',
        left: '0',
        bottom: '10%',
        itemWidth: 8,
        itemHeight: 8,
        data: [lengedData[0], lengedData[1]],
        formatter: (name): any => {
          let singleData = state.systemTypeData.filter(function (item) {
            return item.name == name
          })
          return `${name} ${singleData[0].value}个`
        },
        textStyle: {
          color: '#A2C3E0',
          fontSize: 12,
          align: 'left',
          backgroundColor: 'transparent'
        }
      },
      {
        orient: 'vertical',
        icon: 'circle',
        x: 'center',
        left: '120',
        bottom: '10%',
        itemWidth: 8,
        itemHeight: 8,
        data: [lengedData[2], lengedData[3]],
        formatter: (name): any => {
          let singleData = state.systemTypeData.filter(function (item) {
            return item.name == name
          })
          return `${name} ${singleData[0].value}个`
        },

        textStyle: {
          color: '#A2C3E0',
          fontSize: 12,
          align: 'left',
          backgroundColor: 'transparent'
        }
      }
    ]

    options.series[0].data = state.systemTypeData
    systemTypeOption.systemTypeDom = echarts.init(systemTypeRef.value)
    systemTypeOption.systemTypeDom.setOption(options)
  }
  const initLevelDom = () => {
    let lengedData = state.levelData.map((item) => item.name)
    let options = {
      ...levelData.options
    }
    options.legend.data = lengedData
    options.legend.formatter = function (name) {
      //通过name获取到数组对象中的单个对象
      let singleData = state.levelData.filter(function (item) {
        return item.name == name
      })
      return `${name} ${singleData[0].value}个`
    }
    options.series[0].data = state.levelData
    levelData.levelDom = echarts.init(levelRef.value)
    levelData.levelDom.setOption(options)
  }
  onBeforeUnmount(() => {
    window.removeEventListener('resize', resize)
    systemTypeOption.systemTypeDom?.dispose()
    levelData.levelDom?.dispose()
    emitter.off('projectDataOverviewMapClick', projectDataOverviewMapClick)
  })
</script>

<style lang="scss" scoped>
  .systemaStatistics {
    width: 100%;
    height: 100%;
    .inner_content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      #systemType,
      #level {
        width: 50%;
        height: 100%;
      }
    }
  }
</style>
